<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		
		<!--导入jQuery-->
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div class="container" style="width: 300px; margin-top: 50px;">
			<fieldset>
				<!--鼠标点击输入框就不会弹出-->
				<legend>登录</legend>
				<div class="form-group">
					<label for="username">用户名</label>
					<input class="form-control"
					 autocomplete="off" type="text" name="username" id="username" />
					</div>
				<div class="form-group">
					<label for="password">密码：</label>
					<input class="form-control" 
					autocomplete="off"
					type="password" name="password" id="password" />
				</div>	
				<div class="form-group">
					<button id="btnSave" class="btn btn-primary" onclick="jssave()">保存</button>
					<button id="btnClear" class="btn btn-danger" onclick="jsclear()">取消</button>
				</div> 
				</div>
			</fieldset>
			
			
		</div> 
	</body>
	<script>
		//默认HBuilderX没有JQUERY提示,选择最小角的语法提示库
		//点击保存按钮，获取用户名和密码打印控制台
		function jssave(){
			console.log($("#username").val());
			console.log($("#password").val());
		
		}
		
		//点击取消按钮，清除输入框中的内容
		function jsclear(){
			$("#username").val('');
			$("#password").val('');
		}
		 
		 //上面的方式前期绑定，jQuery后期绑定(js),动态给按钮添加事件
	     
		 //后期绑定实现步骤： 1）获取按钮 2）click这里没有on，3）写匿名函数
		 $("#btnSave").click(function(){
			 var username =$("#username").val();
			 var password =$("#password").val();
			 console.log(username+","+password).val();
		 })
	      
		  $("#btnClear").click(function(){
			  $("#username").val('');
			  $("#password").val('');
		  })
	</script>
</html>
